<template>
  <div class="card-container">
    <div class="top-border" />
    <div class="card-header">
      <div class="header-top">
        <span class="ticket-name">
          {{ticket.type_name}}
        </span>
        <span class="ticket-time">
          4月27日~4月28日 09:00~17:00
        </span>
      </div>
      <div class="header-bottom">
        <span class="ticket-count">
          x {{ticket.type_numm}} 张
        </span>
        <span class="ticket-price">
          <span class="price-desc">
            合计￥
          </span>
          <span class="price-digit">
            {{ticket.type_mny}}
          </span>
        </span>
      </div>
    </div>
    <div class="card-list">
      <div class="card-item" v-for="person in ticket.ticket_psn" :key="person.psnId" @click="gotoPerson(person.id)">
        <div class="card-item-content">
          <span v-for="(item,index) in parsedJson(person.formJson)" :key="index" v-if="item.attribute.filedCode=='uName'">
            {{ item.attribute.filedValue }}
          </span>
          <span v-for="(item,index) in parsedJson(person.formJson)" :key="index" v-if="item.attribute.filedCode=='company'">
            {{ item.attribute.filedValue || '公司名称' }}
          </span>
        </div>
        <div class="card-item-arrow" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ticketCard",
  props: ["ticket", "readonly"],
  data() {
    return {};
  },
  computed: {},
  created: function() {
    // this.id = this.$route.params.id;
  },
  methods: {
    parsedJson(JSONString) {
      return JSON.parse(JSONString);
    },
    gotoPerson(id) {
      this.$router.push({
        path: "/infoEntry",
        query: {
          isReadonly: true,
          // isReadonly: this.readonly,
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.card-container {
  width: 100%;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;

  .top-border {
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, #fd592c, #a802bd, #5803e4);
  }

  .card-header {
    width: 100%;
    box-sizing: border-box;
    padding: 24px 31px 25px 20px;
    background: #282b31;
    * {
      color: #fff;
    }

    .header-top {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;

      .ticket-name {
        font-size: 32px;
        margin-right: 16px;
        font-weight: 500;
      }
      .ticket-time {
        font-size: 20px;
      }
    }

    .header-bottom {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;

      .ticket-count {
        font-size: 24px;
      }
      .ticket-price {
        display: flex;
        flex-direction: row;
        align-items: baseline;

        .price-desc {
          font-size: 20px;
        }
        .price-digit {
          font-size: 32px;
          font-weight: 500;
        }
      }
    }
  }

  .card-list {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);

    .card-item {
      width: 100%;
      padding: 30px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;

      @include bottom-half-line();

      .card-item-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        * {
          font-size: 28px;
          margin-right: 25px;
          color: #fff;
        }
      }
      .card-item-arrow {
        @include right-arrow();
      }
    }
  }
}
</style>
